import React, { useState } from 'react'
import {
	View,
	Image,
	ImageSourcePropType,
	TextInput,
	ImageStyle,
	StyleSheet,
	ViewStyle,
	TextStyle,
} from 'react-native'
import { Division } from 'components'
import { translateSize, commonStyle } from 'styles'

export interface InputWithIconProps {
	icon: ImageSourcePropType
	placeholder?: string
	textContentType?: 'password' | 'none'
	style?: ViewStyle
	onChange: (value: string) => void
}

const InputWithIcon: React.FC<InputWithIconProps> = props => {
	const [value, setValue] = useState<string>()

	return (
		<View style={[styles.container, props.style]}>
			<View style={[commonStyle.containerRow, styles.row]}>
				<Image source={props.icon} style={styles.icon} resizeMode='contain' />
				<TextInput
					style={styles.input}
					onChangeText={text => {
						setValue(text)
						props.onChange(text)
					}}
					secureTextEntry={props.textContentType === 'password'}
					textContentType={props.textContentType}
					value={value}
					placeholder={props.placeholder}
					placeholderTextColor="#C5c5c5"
				/>
			</View>
			<Division />
		</View>
	)
}

interface InputWithIconStyle {
	container: ViewStyle
	row: ViewStyle
	icon: ImageStyle
	input: TextStyle
}

const styles = StyleSheet.create<InputWithIconStyle>({
	container: {
		flexDirection: 'column',
		width: '100%',
		paddingTop: translateSize(20),
		paddingBottom: translateSize(10)
	},
	row: {
		alignItems: 'center',
	},
	icon: {
		width: translateSize(40),
		height: translateSize(40),
		marginRight: translateSize(43),
	},
	input: {
		fontSize: translateSize(28),
		height: translateSize(60),
		padding: 0,
		width: '90%'
	},
})

export default InputWithIcon
